<template>
  <div class="detail">
    <div class="detail-header">
      <van-nav-bar
        class="detail-bar"
        title="文章详情"
        left-arrow
        fixed
        @click-left="$router.back()"
      />
    </div>
    <div class="detail-nav">
      <div class="title">
        <h2>{{ text.title }}</h2>
      </div>

      <div class="detail-author">
        <van-image
          class="detail-img"
          round
          width="3rem"
          height="3rem"
          :src="text.avatar"
        />
        <p>{{ text.author }}</p>
        <p style="color: rgb(222, 198, 207)">{{ text.time | formatDate }}</p>
        <button class="detail-btn1"><van-icon name="plus" />关注</button>
      </div>
      <div class="detail-p">
        <p>{{ text.content }}</p>
      </div>
    </div>
    <div
      class="detail-comment"
      v-for="(item, index) in commentList"
      :key="item._id"
    >
      <van-image
        class="comment-img"
        round
        width="3rem"
        height="3rem"
        :src="item.info.avatar"
      />
      <p class="comment-p1">{{ item.info.nickname }}</p>
      
        <p class="comment-p2">{{ item.content }}</p>
      
      <div class="box">
<p class="comment-p3">{{ item.create_time | formatDate }}</p>
<div class="comment-reply">
          {{ item.reply_num === 0 ? "" : item.reply_num }}回复
        </div>
      </div>
        
        
     

      <div class="comment-like">
        <!-- 评论点赞 -->
        <van-icon
          name="good-job"
          @click="commentLike(item._id, item.is_like, index)"
          :color="item.is_like ? '#f00' : ''"
        />
        <p>{{ item.like_count === 0 ? "" : item.like_count }}</p>
      </div>
    </div>
    <div class="detail-foot">
      <div @click="isShow" class="detail-foot-comment">写评论</div>
      <van-popup v-model="show" position="bottom">
        <van-field
          v-model="content"
          rows="5"
          autosize
          label="评论"
          type="textarea"
          maxlength="1000"
          placeholder="请输入评论"
          show-word-limit
        />
        <div style="text-align: center">
          <van-button type="primary" @click="addComment">发布评论</van-button>
        </div>
      </van-popup>

      <div class="detail-foot-icon">
        <!-- 评论 -->
        <van-icon name="comment-o" size="25" v-if="text.comment == 0" />
        <van-icon name="comment-o" size="25" :badge="text.comment" v-else />
        <!-- 收藏 -->
        <van-icon
          name="star"
          size="25"
          @click="collect"
          :color="text.is_fav ? '#f00' : ''"
        />
        <!-- 点赞 -->
        <van-icon
          name="good-job"
          size="25"
          @click="articleLike"
          :color="text.is_like ? '#f00' : ''"
        />
        <!-- 转发 -->
        <van-icon name="share" size="25" />
      </div>
    </div>
  </div>
</template>

<script>
import detailMethods from "./detailMethods";

export default {
  data() {
    return {
      show: false,
      article_id: "",
      user_id: "",
      text: "",
      skip: 0,
      limit: 10,
      commentList: [],
      comment_type: 0,
      reply_comment_id: "",
      content: "",
      uid: "",
    };
  },
  mounted() {
    this.uid = localStorage.getItem("uid");
    // console.log(this.uid)
    this.article_id = this.$route.query.article_id;
    this.user_id = this.$route.query.user_id;
    this.getArticleDetail();
    this.getCommentList();
  },
  filters: {
    formatDate(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        // let h = date.getHours(); // 时
        // h = h < 10 ? "0" + h : h;
        // let m = date.getMinutes(); // 分
        // m = m < 10 ? "0" + m : m;
        // let s = date.getSeconds(); // 秒
        // s = s < 10 ? "0" + s : s;
        // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
      }
    },
  },
  methods: {
    ...detailMethods,

    isShow() {
      this.show = true;
    },
  },
};
</script>

<style>
/* *{
  margin: 0;
  padding: 0;
} */
.detail {
  overflow-y: auto;
  padding-bottom: 150px;
}
.detail-bar {
  background: #07c060;
}

.detail-nav {
  width: 100%;
  position: relative;
}
.detail-img {
  position: absolute;
  left: 20px;
}
.title {
  display: flex;
  justify-items: center;
  margin: 50px 20px;

  /* height: 50px; */
}
.detail-author {
  position: relative;
  width: 100%;
  border-bottom: 3px solid #fafbfb;
}
.detail-author p {
  margin: 10px;
  width: 100px;
  margin-left: 70px;
}
.detail-btn1 {
  position: absolute;
  top: 0px;
  left: 280px;
  margin-right: 20px;
  background: white;
  border: 1px solid rgb(222, 207, 207);
  border-radius: 50px;
  width: 80px;
  height: 30px;
}
.detail-p {
  max-width: 100%;
  font-size: 16px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  /* border-bottom: 1px solid rgb(222, 207, 207); */
}
.detail-comment {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
/* display: flex; */

}
.comment-img {
  float: left;
  margin: 20px;
  min-height: 50px;
  min-width: 50px;
}
.comment-p1 {
  margin-top: 15px;
  min-height: 10px;
  min-width: 70px;
}
.comment-p2 {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin: 10px;
  box-sizing: border-box;
}
.box{
  width: 100%;
  display: flex;
}
.comment-p3 {
  margin-left: 90px;
  font-size: 13px;
  width: 70px;
}
.box .comment-reply {
  text-align: center;
  font-size: 13px;
  border: 1px solid rgb(222, 207, 207);
  border-radius: 50px;
  width: 50px;
  height: 20px;
  margin-top: 10px;
  margin-left: 5px;
}
.comment-like {
  position: absolute;
  top: 18px;
  right: 30px;
  width: 20px;
  height: 20px;
}
.comment-like p {
  position: absolute;
  top: 0;
  left: 20px;
  margin-top: 0;
}
.detail-foot {
  box-sizing: border-box;
  background: white;
  align-items: center;
  display: flex;
  justify-items: center;
  justify-content: space-around;
  justify-items: auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100%; */
  height: 50px;
  border-top: 1px solid rgb(222, 207, 207);
}
.detail-foot-comment {
  margin: auto 5px;
  text-align: center;
  /* margin: 10px; */
  width: 200px;
  height: 30px;
  border: 1px solid rgb(222, 207, 207);
  border-radius: 50px;
  color: rgb(222, 198, 207);
}
.detail-foot-icon {
  margin: auto;
  width: 150px;
  height: 20px;
  display: flex;
  justify-content: space-around;
}
.van-nav-bar__title {
  color: white;
}
</style>